<template>
	<view class="expert-page">
		<u-navbar :autoBack="true" title="我的订单" :placeholder="true" bgColor="rgba(255,255,255,0)"></u-navbar>
		<view class="content">
			<view class="title">
				全部订单
			</view>
			<view class="order-box">
				<view class="order-item" @click="$navTo.togo('/pages/my/order/reservat')">
					<view class="order-left">
						<view class="order-text">
							我的下单
						</view>
						<view class="order-num"> 
							{{info.myBuyCount || 0}}
						</view>
					</view>
					<image src="https://m.lqvvvv.com/assets/static/my/user-icon1.png" mode=""></image>
				</view>
				<view class="order-item" @click="$navTo.togo('/pages/my/order/reservat-my')">
					<view class="order-left">
						<view class="order-text">
							我的接单
						</view>
						<view class="order-num">
							{{info.buyMeCount|| 0}}
						</view>
					</view>
					<image src="https://m.lqvvvv.com/assets/static/my/user-icon2.png" mode=""></image>
				</view>
				<view class="order-item" @click="$navTo.togo('/pages/my/order/business-list')">
					<view class="order-left">
						<view class="order-text">
							店铺订单
						</view>
						<view class="order-num">
							{{info.shopCount|| 0}}
						</view>
					</view>
					<image src="https://m.lqvvvv.com/assets/static/my/user-icon3.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {}
			}
		},
		onShow() {
			this.getcont()
		},
		methods: {
			getcont() {
				this.$Request({
					method: 'POST',
					url: '/api/user/getOrderCounts',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data
					}
				})

			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style lang="scss" scoped>
	.expert-page {
		min-height: 100vh;
		background-image: url('https://m.lqvvvv.com/assets/static/index/nav-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 900rpx;

		.content {
			padding: 30rpx;

			.title {
				font-size: 48rpx;
				color: #000000;
				font-weight: bold;
				padding: 30rpx;
			}

			.order-box {
				padding: 30rpx;
				color: #000000;

				.order-item {
					background-color: #fff;
					padding: 30rpx 0;
					border-radius: 30rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 30rpx;

					.order-left {
						.order-text {
							font-size: 36rpx;
						}

						.order-num {
							color: #5755F2;
							margin-top: 30rpx;
							font-size: 48rpx;
							font-weight: bold;
						}
					}

					image {
						width: 184rpx;
						height: 184rpx;
						border-radius: 50%;
					}
				}
			}
		}
	}
</style>